<template>
  <page class="app-container">
    <el-alert title="会员等级规则是根据用户当月所获得积分决定下月会员等级" type="error" class="mb20"></el-alert>
    <!-- 表格 begin-->
    <el-table :data="$g.memberTypeList" style="width: 100%">
      <el-table-column prop="id" label="会员等级id" min-width="90"></el-table-column>

      <el-table-column prop="groupName" label="会员等级名称" min-width="120"></el-table-column>

      <el-table-column label="最低积分" min-width="120">
        <template slot-scope="props">
          <el-tag type="success">{{props.row.minIntegral}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" min-width="120">
        <template slot-scope="props">
          <template>
            <el-button type="primary" size="small" plain @click="onUpdate(props.row)">编辑</el-button>
            <!--<el-button type="text" @click="onRemove(scope.row.id)" v-if="scope.row.id !== 1">移除</el-button>-->
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 end-->

    <!--编辑 or 添加 弹窗 begin-->
    <el-dialog title="编辑会员规则" :visible.sync="dialogShow" width="600px">
      <el-form ref="dataForm" :model="dataForm" label-width="140px">

        <el-form-item label="分组名称" prop="groupName"
                      :rules="[{ required: true, message: '请输入分组名称' }, isNameRepeat]">
          <el-input v-model="dataForm.groupName" auto-complete="off" style="width: 200px"></el-input>
        </el-form-item>

        <el-form-item label="最低积分" prop="minIntegral" :max="10"
                      :rules="[{ required: true, message: '请输入最低积分'}, isMinIntegralRepeat]">
          <el-input-number v-model="dataForm.minIntegral" controls-position="right" :min="1"></el-input-number>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确认</el-button>
      </div>
    </el-dialog>
    <!--编辑 or 添加 弹窗 begin-->
  </page>
</template>

<script>
  import {elValidate} from '@/utils/widget'
  import {status_prompt} from '@/utils/feedback'

  export default {
    name: 'grade',
    data() {
      // 验证分组重名
      const isNameRepeat = {
        validator: (rule, value, callback) => {
          const noRepeatName = $g.memberTypeList.filter(x => x.id !== this.dataForm.id).every(x => x.groupName !== value)
          noRepeatName ? callback() : callback(new Error('分组名已被设置'))
        }
      }

      // 验证积分段是否重复
      const isMinIntegralRepeat = {
        validator: (rule, value, callback) => {
          if (this.dataForm.minIntegral <= 0) {
            callback(new Error('最低积分不能小于等于0'))
            return
          }
          const cross = $g.memberTypeList.filter(x => x.id !== this.dataForm.id).every(({minIntegral, groupName}) => {
            const cross = minIntegral == this.dataForm.minIntegral
            if (cross) {
              callback(new Error(`最低积分与分组"${groupName}"重复`))
            }
            return !cross
          })
          cross && callback()
        },
        trigger: 'blur',
      }

      return {
        list: [],
        isNameRepeat,
        isMinIntegralRepeat,
        dialogShow: false,
        dataForm: {}
      }
    },
    computed: {},
    created() {
    },
    methods: {
      // 增
      add() {

      },
      // 删
      del() {

      },
      // 更新数据
      update() {
        return status_prompt({
          ajax: () => this.$post_json('admin/member/updateMemberType', this.dataForm),
          success_text: '修改成功',
          fail_text: '修改失败'
        }).then($g.memberTypeListUpdate)
      },
      onAdd() {
      },
      onDel() {
      },
      onUpdate({id, groupName, minIntegral}) {
        this.dataForm = {id, groupName, minIntegral}
        this.dialogShow = true
      },
      async onSubmit() {
        await elValidate(this, 'dataForm')
        await this.update()
        this.dialogShow = false
        await this.$nextTick()
        this.$refs.dataForm.resetFields()
      }
    }
  }
</script>
